﻿<PageHeader Class="site-page-header">
    <!--breadcrumb-->
    <PageHeaderBreadcrumb>
        <Breadcrumb>
            <BreadcrumbItem>First-level Menu</BreadcrumbItem>
            <BreadcrumbItem>
                <a>Second-level Menu</a>
            </BreadcrumbItem>
            <BreadcrumbItem>Third-level Menu</BreadcrumbItem>
        </Breadcrumb>
    </PageHeaderBreadcrumb>

    <!--avatar-->
    <PageHeaderAvatar>
        <Avatar Src="https://avatars0.githubusercontent.com/u/22736418?s=88&v=4" />
    </PageHeaderAvatar>
    <!--title-->
    <PageHeaderTitle>Title</PageHeaderTitle>

    <!--subtitle-->
    <PageHeaderSubtitle>This is a subtitle</PageHeaderSubtitle>

    <!--tags-->
    <PageHeaderTags>
        <Tag Color="blue">Running</Tag>
    </PageHeaderTags>

    <!--extra-->
    <PageHeaderExtra>
        <Button>Operation</Button>
        <Button>Operation</Button>
        <Button Type="@ButtonType.Primary">Primary</Button>
        <Dropdown Placement="@PlacementType.BottomRight">
            <Overlay>
                <Menu>
                    <MenuItem>
                        1st menu item
                    </MenuItem>
                    <MenuItem>
                        2nd menu item
                    </MenuItem>
                    <MenuItem>
                        3rd menu item
                    </MenuItem>
                </Menu>
            </Overlay>
            <ChildContent>
                <Button><Icon Type="ellipsis" /></Button>
            </ChildContent>
        </Dropdown>
    </PageHeaderExtra>

    <!--content-->
    <PageHeaderContent>
        <Row>
            <div class="pageheader-content">
                <Paragraph>
                    Ant Design interprets the color system into two levels: a system-level color system and a product-level color system.
                </Paragraph>
                <Paragraph>
                    Ant Design's design team preferred to design with the HSB color model, which makes it easier for designers to have a clear
                    psychological expectation of color when adjusting colors, as well as facilitate communication in teams.
                </Paragraph>
                <div class="pageheader-content-link">
                    <a> <img src="https://gw.alipayobjects.com/zos/rmsportal/MjEImQtenlyueSmVEfUD.svg" alt="start" />Quick Start </a>
                    <a> <img src="https://gw.alipayobjects.com/zos/rmsportal/NbuDUAuBlIApFuDvWiND.svg" alt="info" />Product Info </a>
                    <a> <img src="https://gw.alipayobjects.com/zos/rmsportal/ohOEPSYdDTNnyMbGuyLb.svg" alt="doc" />Product Doc </a>
                </div>
            </div>
            <div class="pageheader-content-image">
                <img src="https://gw.alipayobjects.com/zos/antfincdn/K%24NnlsB%26hz/pageHeader.svg" alt="content" />
            </div>
        </Row>
    </PageHeaderContent>
</PageHeader>

<style>
    .pageheader-content {
        flex: 1;
    }

        .pageheader-content p {
            margin-bottom: 1em;
        }

    .pageheader-content-link a {
        margin-right: 16px;
    }

        .content-link a img {
            margin-right: 8px;
        }

    .pageheader-content-image {
        margin: 0 0 0 60px;
        display: flex;
        align-items: center;
    }

        .pageheader-content-image img {
            width: 100%;
        }
</style>